<script lang="ts" setup>
import { InfoApi } from '@/api/app/company'
import { Delete, Plus } from '@element-plus/icons-vue'
/** 首页设置 */
defineOptions({ name: 'H5SiteInfo' })
onMounted(() => {
  getInfo()
})
const message = useMessage() // 消息弹窗
function getInfo() {
  InfoApi.getInfoPage({pageNum: 0, pageSize: 10}).then((res) => {
    formData.value = res.list[0]
    formData.value.contentModules = 
    formData.value.modulesContentList && formData.value.modulesContentList.length > 0 ? 
    formData.value.modulesContentList : 
    [{ 
      moduleType: '',
      title: '',
      content: '', 
      linkUrl: '',
      imageUrl: '',
      typeOrder: 1
    }]
    formData.value.carouselImages = formData.value.carouselImageList.map((item: any) => item.imageUrl)
  })
}
const formData = ref({
  contentModules: [{
    moduleType: '',
    title: '',
    content: '', 
    linkUrl: '',
    imageUrl: '',
    typeOrder: 1
  }]
})
async function upDateOrSave() {
  if(formData.value.carouselImages && formData.value.carouselImages.length > 0) {
    formData.value.carouselImageList = []
    formData.value.carouselImages.forEach((item: any) => {
      formData.value.carouselImageList.push({
        imageUrl: item,
        linkUrl: '',
        description: '',
        isActive: true,
        displayOrder: 1
      })
    })
  } else {
    formData.value.carouselImageList = []
  }
  formData.value.carouselImages = formData.value.carouselImageList

  formData.value.modulesContentList.forEach((item: any) => {
    delete item.id
  })
  if (!formData.value.id) {
      await InfoApi.createInfo(formData.value)
      message.success('新增成功')
    } else {
      await InfoApi.updateInfo(formData.value)
      message.success('修改成功')
    }
    getInfo()
}

const module = ref({
  moduleType: '',
  title: '',
  content: '',
  linkUrl: '',
  imageUrl: '',
  typeOrder: 1
})

function removeModule(index: number) {
  formData.value.contentModules.splice(index, 1)
}

function addModule() {
  formData.value.contentModules.push({
    ...module.value
  })
  
  // 重置表单
  module.value = {
    moduleType: '',
    title: '',
    content: '', 
    linkUrl: '',
    imageUrl: '',
    typeOrder: 1
  }
}

function handleModuleTypeChange(value: string, module: any) {
  module.title = value
}

</script>
<template>
  <el-card>    
    <el-row :gutter="20" class="content-row">
      <el-col  :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <div class="section-title">
          <h3>轮播图</h3>          
          <el-button type="primary" plain @click="upDateOrSave" v-hasPermi="['app:info:create']">保存</el-button>
        </div>
        <div class="section-box">
          <UploadFile :fileType="['png', 'jpg', 'jpeg']" source="yjj" v-model="formData.carouselImages" />
        </div>        
      </el-col>
      <el-col  :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <div class="section-title">
          <h3>公司概览</h3>
          <el-button type="primary" plain @click="upDateOrSave" v-hasPermi="['app:info:create']">保存</el-button>
        </div>
        <div class="">
          <el-form :model="formData">
            <el-form-item label="公司概览">
              <Editor ref="editorView"  v-model="formData.overview" height="150px" />
              <!-- <el-input type="textarea" v-model="formData.overview" :rows="4" placeholder="请输入公司概览内容"/> -->
            </el-form-item>
            <el-form-item label="公司名称">
              <el-input v-model="formData.companyName" placeholder="请输入公司名称"/>
            </el-form-item>
            <el-form-item label="成立时间">
              <el-input v-model="formData.foundedYear" placeholder="请输入公司成立时间"/>
            </el-form-item>
            <el-form-item label="总部地址">
              <el-input v-model="formData.headquarters" placeholder="请输入总部地址"/>
            </el-form-item>
            <el-form-item label="员工数量">
              <el-input v-model="formData.employeeCount" placeholder="请输入员工数量"/>
            </el-form-item>
            <el-form-item label="产品数量">
              <el-input v-model="formData.productCount" placeholder="请输入产品数量"/>
            </el-form-item>
            <el-form-item label="服务客户数">
              <el-input v-model="formData.customerCount" placeholder="请输入服务客户数"/>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col  :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <div class="section-title">
          <h3>动态模块</h3>
          <el-button type="primary" plain @click="upDateOrSave" v-hasPermi="['app:info:create']">保存</el-button>
        </div>
        <div class="" style="min-height: 65vh;max-height: 65vh;overflow: auto;">
          <el-form :model="formData">
            <div v-for="(module, index) in formData.contentModules" :key="index" class="module-item">
              <div class="delete-btn" v-hasPermi="['app:info:create']">
                <el-button type="danger" circle :icon="Delete" @click="removeModule(index)" v-if="index > 0"/>            
                <el-button type="primary" circle :icon="Plus" @click="addModule" v-if="index === formData.contentModules.length - 1"/>
              </div>
              <el-form-item label="模块类型">
                <el-select v-model="module.moduleType" placeholder="请选择模块类型" @change="handleModuleTypeChange($event, module)">
                  <el-option label="技术实力" value="技术实力" />
                  <el-option label="智造能力" value="智造能力" />
                  <el-option label="应用场景" value="应用场景" />
                </el-select>
              </el-form-item>

              <el-form-item label="模块标题">
                <el-input v-model="module.title" placeholder="请输入模块标题"/>
              </el-form-item>

              <el-form-item label="模块内容">
                <Editor :ref="'editor'+index" v-model="module.content" height="150px" />
                <!-- <el-input type="textarea" v-model="module.content" :rows="3" placeholder="请输入模块内容"/> -->
              </el-form-item>
  
              <el-form-item label="排序">
                <el-input v-model="module.typeOrder" placeholder="请输入排序"/>
              </el-form-item>

              <el-form-item label="模块图片">
                <UploadImg v-model="module.imageUrl" />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-col>
      <el-col  :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
        <div class="section-title">
          <h3>宣传视频</h3>
          <el-button type="primary" plain @click="upDateOrSave" v-hasPermi="['app:info:create']">保存</el-button>
        </div>
        <div class="section-box">
          <el-form :model="formData" label-width="70px">
            <el-form-item label="视频封面">
              <UploadImg v-model="formData.videoThumbnail" />
            </el-form-item>
            <el-form-item label="视频描述">
              <el-input type="textarea" v-model="formData.videoDescription" :rows="3" placeholder="请输入视频描述"/>
            </el-form-item>
          </el-form>
          <UploadFile :fileType="['mp4']" source="yjjViDeo" :limit="1" :file-size="40" v-model="formData.videoUrl" />
        </div>
      </el-col>      
    </el-row>
  </el-card>
</template>
<style scoped>
  .content-row {
    margin: 20px 0;
  }

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0 15px; */
    margin-bottom: 30px;
  }

  .section-title h3 {
    position: relative;
    padding-left: 15px;
    margin: 0;
  }

  .section-title h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: #409EFF;
  }
  .section-box{
    padding: 0 15px;
  }
  .module-item {
    position: relative;
  }
  .delete-btn {
    position: absolute;
    right: 0;
    z-index: 1;
  }
  </style>